<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--公共css-->
    <div th:replace="common :: common-css"></div>
    <!--公共js-->
    <div th:replace="common :: common-js"></div>

    <style>
        .col-sm-6 label:hover {
            border-color: #337ab7;
            cursor: pointer;
        }
    </style>
</head>
<body>
<!--顶部导航-->
<div th:replace="common :: top-nav"></div>
<!--顶部导航-->

<!--左侧导航-->
<div th:replace="common :: common-account-left-nav"></div>
<!--左侧导航-->

<div class="col-sm-6 col-sm-offset-1">
    <form id="uploadForm" th:action="@{/userController/uploadHeadPhoto}" method="post" enctype="multipart/form-data">

        <div id="uploadForm_alert" class="alert alert-danger alert-dismissible hidden">
            <button type="button" class="close" data-dismiss="alert" ><span >&times;</span></button>
            <strong>Warning!</strong> <span id="uploadForm_alert_msg"></span>
        </div>

        <div class="col-sm-6">
            <label for="uploadInput" class="thumbnail text-center" style="height:292px; color: #337ab7; margin: 0;">
                <span class="glyphicon glyphicon-picture" style="font-size: 60px; margin-top: 30%;"></span><br>
                <span>点击此处上传</span>
            </label>
            <input type="file" id="uploadInput" name="uploadInput" class="hidden">
        </div>

        <div class="col-sm-6">
            <div href="javascript:;" class="thumbnail">
                <!--没上传之前显示原有头像,上传前显示预览头像-->
                <img id="preImg"  style="height:292px;">
                <span id="loginUserPhoto" hidden th:text="${session.loginUserPhoto}"></span>
            </div>
        </div>
        <input type="submit" class="btn btn-info  btn-block" disabled value="更新">
    </form>

</div>

<!--
<img src="http://localhost:8888/mysql_sakila/user_files/unnamed.jpg" alt="">
-->
</body>
<script>
    $(document).ready(function () {
        //返回当前协议  http:  (没有斜杠)
        projectProtocol=window.document.location.protocol;
        //返回host, localhost:8888 (没有斜杠)
        projectHost=window.document.location.host;
        //获取项目名,带斜杠如:/项目名
        projectName = window.document.location.pathname.match(/^[/]{1}\w*/);

        $("#left_bar_uploadheadphoto").addClass("active");

        //初始化页面
         initPage();

        //上传空间改变的时候,检查文件是否合格
        $("#uploadInput").change(function() {
            //	let imgRealPath=$(this).val(); //上传图片的绝对路径
            let $file = $("#uploadInput")[0].files[0] ;
            //$file对象中的东西
            // name: "aaaa.jpg" 得到文件名,包括后缀. aaa.jpg
            // size: 13674  即13K
            // type: "image/jpeg"
            let fileType=$file.type; //获取文件类型
            let imgTypeArr=["image/png","image/jpg","image/jpeg","image/bmp"];
            let isImg=false;

            for(let arr in imgTypeArr){
                if(imgTypeArr[arr]==fileType){
                    isImg=true;
                    break;
                }
            }
            if(isImg){//如果是图片则回显在浏览器上
                if($file.size<=(1024*50)){
                    let fileRead=new FileReader();
                    fileRead.readAsDataURL($file)
                    fileRead.onload=function(){
                        $("#preImg").attr("src",this.result);
                        $("#uploadForm :submit").removeAttr("disabled")
                    }
                }else {
                    $("#uploadInput").val("");//清空input type='file'控件
                    alert("图片不能大于50K");
                }
            }else {
                $("#uploadInput").val("");//清空input type='file'控件
                alert("只支持png/jpg/jpeg/bmp格式的图片")
            }
        })

        //form表单的id,不是submit的id
        $("#uploadForm").submit(function () {
            let $file = $("#uploadInput")[0].files[0] ;
               if ($file==undefined||$file==null){//如果input type='file'控件没东西
                   return false;
               } else {
                   $("#uploadForm :submit").attr("disabled")
                   return true;
               }
        });

    });

    //初始化页面
    function initPage() {
        //获取头像位置  /位置/xxxx.jpg
        let imgLocal=$("#loginUserPhoto").text();

        if (imgLocal!=""){
            //拼接成格式  http://localhost:8888/mysql_sakila/user_files/unnamed.jpg
            let fullPath=projectProtocol+"//"+projectHost+projectName+imgLocal;
            $("#preImg").attr("src",fullPath);
        } else {
            //当前用户没有图片,则默认图片
            $("#preImg").attr("src","");
            //打开警告框
            $("#uploadForm_alert").removeClass("hidden");

            $("#uploadForm_alert_msg").text("你当前没有头像");
        }
    }
</script>
</html>